<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"  
      xmlns:h="http://java.sun.com/jsf/html"  
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core">
    <h:head>
        <title>Browse By Category</title>
    </h:head>
    <h:body>
        <h:form>  
            <h:panelGrid columns="2" style="margin-bottom:10px" cellpadding="5">  
                <h:outputText value="Find Article By Category: " />  
                <p:selectOneMenu id="selectAuthor" value="#{categoryBean.searchByCategory}">
                    <f:selectItem itemLabel="Select One" itemValue="" />  
                    <f:selectItems value="#{categoryBean.categories}" var="category" itemLabel="#{category.name}" itemValue="#{category.name}" />  
                </p:selectOneMenu>  
            </h:panelGrid>  
            <p:commandButton value="Submit" update="displayFindByCategory" oncomplete="dlgFindByCategory.show()" actionListener="#{categoryBean.findByCategory()}"/>


            <p:dialog header="Selected Category" showEffect="fade" hideEffect="fade" widgetVar="dlgFindByCategory">  
                <h:panelGrid columns="1" id="displayFindByCategory"> 
                    <p:dataTable id="articleCategoryTable"  var="art" value="#{categoryBean.articlesByCategory}"
                                 paginator="true" rows="5"  
                                 paginatorTemplate="{CurrentPageReport}  
                                 {FirstPageLink} {PreviousPageLink} 
                                 {PageLinks} {NextPageLink} 
                                 {LastPageLink} {RowsPerPageDropdown}"  
                                 rowsPerPageTemplate="5,10,15"> >  
                        <p:column headerText="Id" >  
                            <h:outputText value="#{art.id}" />  
                        </p:column>  
                        <p:column headerText="Status" >  
                            <h:outputText value="#{art.status}  " />  
                        </p:column>  
                        <p:column headerText="Date" >  
                            <h:outputText value="#{art.date}  " />  
                        </p:column>  
                        <p:column headerText="Title" >  
                            <h:outputText value="#{art.title}" />  
                        </p:column>
                        <p:column headerText="Article Body" >  
                            <h:outputText value="#{art.articleBody}" />  
                        </p:column>
                    </p:dataTable> 
                </h:panelGrid>  
            </p:dialog> 

        </h:form>  
    </h:body>
</html>

